<template>
  <div class="depart-selector">
    <el-header class="sys_header">
      <img :src="img" alt="图片" style="height: 100%;">
    </el-header>
    <el-main>
      <div
          class="department-card"
          @click="clickHandle"
      >
        {{items!=null?defaultName:items}}
      </div>
      <div
          v-for="(item, index) in items"
          :key="item.id"
          class="department-card"
          :style="{ animationDelay: index * .3 + 's' }"
      >
        {{item==null?defaultName:item.text}}
      </div>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import img from '@/assets/img/title.png'
import {onMounted, ref} from "vue";
import {EmployeeFn} from "@/router/function/index.ts";

const items = ref()
const defaultName = ref("人力资源部门")

const clickHandle = ()=>{
  // console.log(Fn.EmployeeFn)
  // Fn.EmployeeFn()
  console.log(EmployeeFn());
}
onMounted(()=>{
  /**
   * 默认资源
   * */
  setTimeout(()=>{
    items.value = [
      { id: 1, text: '人力资源部门',path:'employee'},
      { id: 2, text: '公司财务部门' },
      { id: 3, text: '系统维护部门' },
    ]
  }, 1000)
})

</script>

<style scoped lang="scss">
.depart-selector{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: 50px auto/100%;
}
.sys_header {
  background-color: $bg-color-primary;
  color: $color-primary;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
}
.el-main{
  height:100%;
  width: 100%;
  overflow: scroll;
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 5px;
  flex-wrap: wrap;
}
.department-card {
  box-sizing: border-box;
  width: 200px;
  height: 120px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f46e5, #3b82f6); // 紫蓝渐变
  color: white;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  &:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

</style>